<template>
  <div>
    <div > <van-icon name="arrow-left" @click="goBack" /> </div>
    <h2>欢迎您成为2211的会员</h2>
    <p>
        用户名：<input type="text" placeholder="数字字母下划线，6-12位，不能数字开头" v-model="username" />
    </p>
    <p>
        密码：<input type="password" v-model="userpass" />
    </p>
    <p>
        确认密码：<input type="password" v-model="userpass2" />
    </p>
    <p>
        验证码：<input type="text" v-model="code" /><span>{{randomCode}}</span>
    </p>
    <p>
        <input type="button" value="注册" @click="regSave">
    </p>
    <div>{{msg}}</div>
  </div>
</template>

<script>
import axios from "axios";

export default {
    name:"Reg",
    data(){
        return {
            username:"lcg110",
            userpass:"123666",
            userpass2:"123666",
            code:"",
            randomCode:"",
            msg:""
        }
    },
    created(){
        console.log("Reg:this.$route.query",this.$route.query);
        this.getRandomCode();
    },
    methods:{
        goBack(){
            this.$router.back();
        },
        
        // 产生随机验证码
        getRandomCode(){
            let str = "";
            for(let i=0;i<4;i++){
                str += parseInt(Math.random()*10);
            }
            this.randomCode = str;
        },
        // 注册
        regSave(){
            this.msg="";
            // 一、前端验证：
            // 非空验证？

            // 1、用户名格式的验证
            // 数字字母下划线，6-12位，不能数字开头
            let regluar = /^[a-z_]\w{5,11}$/i;
            if(!regluar.test(this.username)){
                this.msg="用户名格式不正确，应该是：数字字母下划线，6-12位，不能数字开头";
                return ;
            }

            // 2、两次密码是否一致
            if(this.userpass!=this.userpass2){
                this.msg="两次密码不一致";
                return ;
            }
            // 3、验证码是否正确
            if(this.code!=this.randomCode){
                this.msg="验证码不正确";
                this.getRandomCode();
                return;
            }

            // 二、注册
          
            // data（发送给后端的数据使用json格式）：content-type是application/json。
            // axios({
            //     url:"http://localhost:3000/vips",
            //     method:"post",
            //     data:{
            //         username:this.username,
            //         userpass:this.userpass
            //     }
            // })
            // .then(res=>{
            //     // console.log("res.data",res.data);
            //     if(res.data){
            //         this.msg="注册成功！";
            //     }else{
            //         this.msg="注册失败！";
            //     }
            // })
            axios.post("http://localhost:3000/vips",{
                    username:this.username,
                    userpass:this.userpass
            })
             .then(res=>{
                // console.log("res.data",res.data);
                if(res.data){
                    this.msg="注册成功！";
                    
                }else{
                    this.msg="注册失败！";
                }
            })
        }
    }

}
</script>

<style>

</style>